<!--Docker栏-->
<script setup lang="ts">
import useTaskStore from '@/store/task'
import {ref, watch} from "vue";
import {appConfigType} from "@/types/component/core";

const taskStore = useTaskStore()

const appList = ref<Array<appConfigType>>([])
//点击图标打开或者让app处于活跃状态
const appHandler = (name: string) => {
  taskStore.OPEN_APP(name)
}
const focusApp = ref<string | null>(null)
//移动在图标上展示app标题
const showBoard = (name) => {
  focusApp.value = name
}
//移出去关闭标题
const closeBoard = () => {
  focusApp.value = null
}

//docker是否可伸缩
const flexible = ref(false)
//在docker可伸缩的状态下，docker是否是隐藏状态
const dockIsShow = ref(true)
//
const dockerBottomStyle = ref<number>(5)
watch(() => taskStore.activeTask, (newVal) => {
  if (newVal) {
    if (taskStore.IS_FULL(newVal?.name)) {
      flexible.value = true
      hideDocker()
    } else {
      flexible.value = false
      showDocker()
    }
  } else {
    flexible.value = false
    showDocker()
  }
}, {deep: true})
const hideDocker = () => {
  dockIsShow.value = false
  dockerBottomStyle.value = -75
}
const showDocker = () => {
  dockIsShow.value = true
  dockerBottomStyle.value = 5
}
const flexMouseHandler = (type: string) => {
  if (type === 'over' && flexible.value) {
    showDocker()
  } else if (type === 'leave' && flexible.value) {
    hideDocker()
  }
}
</script>
<template>
  <div class="docker" :style="{bottom: dockerBottomStyle+'px'}" @mouseover="flexMouseHandler('over')"
       @mouseleave="flexMouseHandler('leave')">
    <div class="focus-bar border"></div>
    <div class="docker-container">
      <template v-for="app in taskStore.appList">
        <div class="docker-item" @click="appHandler(app.name)" @mouseover="showBoard(app.name)"
             @mouseout="closeBoard()" v-if="app.onDocker">
          <component :is="app.icon"></component>
          <div class="isActive-direct"
               :style="{backgroundColor:taskStore.getTaskIdx(app.name)===-1?'transparent':'#222127'}"></div>
          <div class="title-board" v-if="focusApp === app.name">
            <div class="board-content">{{ app.title }}</div>
            <div class="triangle"></div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<style lang="less" scoped>
.docker {
  display: flex;
  min-width: 80px;
  height: 75px;
  padding: 0 5px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 22px;
  background-color: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  box-shadow: 2px -1px 7px rgb(0 0 0 / 40%);
  transition-property: width;
  transition-duration: inherit;
  transition: 0.6s;
  z-index: 100;

  .focus-bar {
    position: absolute;
    width: -webkit-fill-available;
    height: 15px;
    top: -15px;
    opacity: 0;
  }

  .docker-container {
    display: flex;
    align-items: center;

    .docker-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      box-sizing: border-box;
      width: 60px;
      height: 70px;
      flex-direction: column;
      cursor: pointer;
      user-select: none;


      .docker-icon {
        display: block;
        font-size: 60px;
      }

      .isActive-direct {
        width: 4px;
        height: 4px;
        border-radius: 50%;
      }

      .title-board {
        position: absolute;
        top: -45px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        z-index: 100;

        .board-content {
          width: 100px;
          text-align: center;
          height: 25px;
          line-height: 25px;
          background-color: rgba(255, 255, 255, .4);
          border-radius: 5px;
          box-shadow: -0.3px -0.3px 4px rgb(0 0 0 / 30%);
        }

        .triangle {
          margin: 0 auto;
          width: 0px;
          height: 0px;
          border: 10px solid rgba(255, 255, 255, .4);
          border-top-color: rgba(255, 255, 255, .4);
          border-bottom-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }
      }
    }
  }
}
</style>
